<template>
    <div class="register">
        <van-nav-bar left-arrow :border="false" @click-left="router.go(-1)"></van-nav-bar>
        <loginTitle>
            <template #title>创建账号</template>
            <template #text>请输入您的用户名和Email地址</template>
        </loginTitle>
        <van-form @submit="onSubmit" style="margin-top: 4.5rem;">
            <van-cell-group inset>
                <van-field left-icon="user-o" v-model="username.user" name="username" placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请填写用户名' }, { pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{3,6}/, message: '需3-6个字符' }]" />
                <van-field left-icon="ecard-pay" v-model="username.email" name="email" placeholder="请输入Email"
                    :rules="[{ required: true, message: '请填写Email' }, { pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/, message: '邮箱格式错误' }]" />
                <van-field left-icon="graphic" v-model="username.phone" name="phone" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }, {
                    pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号输入错误'
                }]" />
            </van-cell-group>
            <div style="text-align: center; margin-bottom: 2rem;">
                <van-button type="primary" size="large" native-type="submit"
                    color="linear-gradient(to right, #e9837a, #7536f9)">
                    注册
                </van-button>
            </div>
        </van-form>
        <div class="logon-qita">其他方式登录</div>
        <loginItem :mybutton="mybutton"></loginItem>
        <loginText>
            <template #myregister> <span @click="router.push('/login')" style="color: red;">去登录</span> </template>
            <template #mylogin>有一个账号？</template>
        </loginText>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {useRouter} from 'vue-router';
import loginTitle from '@/components/loginTitle.vue';
import loginItem from '@/components/loginItem.vue';
import loginText from "@/components/loginText.vue";
import { useUserLogin } from '@/store/useLogin/index';
let useLogin = useUserLogin()
const router=useRouter()
const username = ref({
    user: '',
    email: '',
    phone: ''
});
const mybutton = ref([
    {
        id: 1,
        icon: 'iconfont icon-shouji1',
        colors: 'color: #3a77f3;',
        text: '手机号登录'
    },
    {
        id: 2,
        icon: 'iconfont icon-weixin',
        colors: 'color: #09bb07;',
        text: '微信登录'
    }
]);
// 注册按钮
const onSubmit = async(values: any) => {
    await useLogin.getStoreregisterAccount(values)
  
};
</script>
<style lang="scss" scoped>
.register {
    height: 100%;
    width: 100%;

    .logon-qita {
        text-align: center;
        color: #aea6d0;
        font-size: 1.3rem;
    }
}

::v-deep .van-nav-bar .van-icon {
    color: #000;
}

::v-deep .van-button {
    height: 4.5rem;
    width: 32rem;
    border-radius: 1rem;
}

::v-deep .van-cell {
    height: 5.5rem;
}

::v-deep .van-field__left-icon {
    color: #8560c7;
}
</style>